<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">


<meta charset="utf-8" />
<title></title>
<!--主题样式-->
<link rel="stylesheet" type="text/css"href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		/* 配置datagrid属性 */
		$("#myDataGrid").datagrid({
			fit:true,
			//title:'模块列表',
			fitColumns:true, //让对应的列按照比例设置宽度 ,如果不设置此属性,表头设置width就是固定宽度
			url:'modular/modularList.do',//数据 json串
			method:'get',
			pagination:true, //显示分页条
			/* pageList:[2,3,4],
			pageSize:2, */
			toolbar:"#toolbar", //顶部工具条
			striped:true, //斑马线效果
			singleSelect:true,//值能够选中一行,默认可以选中多行
		});
	});
	//新增打开对话框
	function openDialog(){
		//打开对话框
		$("#myDialog").dialog("open");	
		//设置标题
		$("#myDialog").dialog("setTitle","新增模块");
		//清除表单数据
		$("#modularForm").form("clear");
	}
//编辑模块
function editModular(){
	//1.获取选中行的数据 (json对象)
	var rowData = $("#myDataGrid").datagrid("getSelected");
	if(rowData == null){
		$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
		return;
	}
	
	//会显表单数据: 调用表单的load方法
	$("#modularForm").form("load",rowData);
	
	//打开对话框
	$("#myDialog").dialog("open");	
	//设置标题
	$("#myDialog").dialog("setTitle","编辑模块");
}
	//保存或者更新
	function saveOrUpdateModular(){
		$('#modularForm').form('submit', {    
		    url:"modular/saveOrUpdateModular.do",    
		    success:function(data){
		    	data = eval('(' + data + ')');  
		      	
		    	if(data.code == 1){
		    		$.messager.alert("温馨提示",data.msg,'info');  
		    		//关闭对话框
		    		$("#myDialog").dialog("close");	
		    		//重新加载datagrid
		    		$("#myDataGrid").datagrid("reload");
		    		
		    	}else{
		    		$.messager.alert("温馨提示",data.msg,'error'); 
		    	}
		    }    
		});  
	}
	//取消操作:关闭对话框
	function closeDialog(){
		//关闭对话框
		$("#myDialog").dialog("close");	
	}
	
	//删除操作
	function del(){
		//1.获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
			return;
		}
		//提示用户是否删除
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		    	//2.获取选中行中数据的id
				var modular_id = rowData.modular_id;
				//3向后台发送ajax请求删除数据
				$.get("modular/deleteModularById.do",{"modular_id":modular_id},function(data){
					if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		//重新加载datagrid
			    		$("#myDataGrid").datagrid("reload");
			    		
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
				});
		    }    
		});  
	}
	
</script>


<!-- 表单对话框 dialog -->
<div id="myDialog" class="easyui-dialog" 
	data-options="{width:300,height:150,buttons:'#dialogButtons',closed:true}"
>
	<form id="modularForm" method="post">
		<!-- 模块id,用于修改的时候用 -->
		<input type="hidden" name="modular_id">
		<table align="center" style="margin-top: 10px">
			<tr>
				<td>模块名称</td>
				<td>
				<!-- 
					class="easyui-validatebox" 表单元素必须校验
					{required:true}表单元素不能为空
				 -->
				<input name="modular_name" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
		</table>
	</form>	
</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="saveOrUpdateModular();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>



<!-- datagrid的顶部工具条 -->
<div id="toolbar">
	<a onclick="openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}"></a>
	<a onclick="editModular();"class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}"></a>
	<a onclick="del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}"></a>
</div>

<!-- datagrid 组件 -->
<table  id="myDataGrid" class="easyui-datagrid" >
	<thead>
			<tr>
				<th data-options="field:'modular_id',width:1">序号</th>
				<th data-options="field:'modular_name',width:1">模块名</th>
			</tr>
		</thead>
</table >